<template>
	<div>
		<!-- :disabled="!LoginPowerslist['upl']" -->
		<img v-if="imageUrl && isShow" :src="imageUrl" class="img" :style="{ height:onImg(imageUrl, 200), width:'200px' }" />
		<a-upload name="file" list-type="picture-card" class="avatar-uploader" :headers="headers" v-if="!imageUrl || !isShow"
			:show-upload-list="false" :action="url" accept='image/png, image/jpeg' :before-upload="beforeUpload" @change="handleChange"
			>
			<div>
				<slot>
					<slot name="updateText"></slot>
				</slot>
			</div>
		</a-upload>
		<!-- :disabled="!LoginPowerslist['upl']" -->
		<a-upload class="marginl_xl"  :show-upload-list="false" :action="url" :before-upload="beforeUpload"  @change="handleChange" v-if="imageUrl && isShow">
			<Mybutton type="btn_border" text="更换图片" @click="onAdd" iconname="report_export" />
		</a-upload>
	</div>
</template>

<script lang="ts" setup>
	import { defineProps,defineEmits, computed, watch, ref } from "vue";
	// import { usePermission } from '@/store';
	import Message from '@/utils/message';
	import onImg from "@/utils/setImage";
	
	const PROPS = defineProps({
		// data: {
		// 	type: Object,
		// 	default () {
		// 		return {
		// 			type: "questions"
		// 		};
		// 	},
		// },
		imgSrc: {
			type: String,
			default () {
				return "";
			},
		},
		disabled: {
			type: Boolean,
			default () {
				return false;
			},
		},
		isShow: {
			type: Boolean,
			default () {
				return true;
			},
		},
	});
	const EMIT = defineEmits(["success"]);
	// const permission = usePermission();
	// const LoginPowerslist = computed(()=> permission.$state.LoginPowerslist);
	
	const url = computed(
		() => `/api/admin/public/upload`
	);
	const token = localStorage.getItem("token");
	const headers = {
		Authorization: `Bearer ${token}`,
	};
	const loading = ref < boolean > (false);
	const imageUrl = ref < string > ("");
	
	const getBase64 = (img: Blob, callback: (base64Url: string) => void) => {
		const reader = new FileReader();
		reader.addEventListener("load", () => callback(reader.result as string));
		reader.readAsDataURL(img);
	};
	
	const handleChange = (info: any) => {
		if (info.file.status === "uploading") {
			loading.value = true;
			return;
		}
		if (info.file.status === "done") {
			// Get this url from response in real world.
			getBase64(info.file.originFileObj, (base64Url: string) => {
				imageUrl.value = base64Url;
				loading.value = false;
			});
		}
		if (info.file.response.code === 0) {
			EMIT("success", info.file.response.data,'image');
		} else {
			Message.error(info.file.response.prompt);
		}
	
		if (info.file.status === "error") {
			loading.value = false;
			Message.error("上传错误");
		}
	};
	
	const beforeUpload = (file: any) => {
		if(!file.type.includes('image')){
			Message.error("请上传图片");
		};
		return file.type.includes('image');
		const isLt2M = file.size / 1024 / 1024 < 5;
		if (!isLt2M) {
			Message.error("最大只能上传5M的图片!");
		}
		return isLt2M;
	};
	
	watch(()=>PROPS.imgSrc,()=>{
		imageUrl.value = PROPS.imgSrc;
	},{ immediate: true });
	
</script>

<style>
</style>